<template>
	<coreshop-page title="门店列表" mode="left">
		<view class="layout-store-box">
			<view class="search-box" :style="{'top':`${statusBarHeight}px`}">
				<uv-input shape="circle" placeholder="请输入门店名" prefixIcon="search" v-model="state.keyWord"
					:customStyle="{ 'background-color': '#fff' }" @confirm="handleSearch"
					prefixIconStyle="font-size: 22px;color: #909399">
					<template #suffix>
						<view class="search-tit" @click.stop="handleSearch">搜索</view>
					</template>
				</uv-input>
			</view>
			<view class="store-box" v-if="state.storeList.length > 0">
				<view class="item-box" v-for="item in state.storeList" :key="item.id" @click="handleSelectStore(item)">
					<view class="img-box">
						<image class="img" :src="item.logoImage"></image>
					</view>
					<view class="msg-box">
						<view class="msg">
							<text class="lab">名称：</text>
							<text class="val">{{ item.storeName }}</text>
						</view>
						<view class="msg">
							<text class="lab">电话：</text>
							<text class="val">{{ item.mobile }}</text>
						</view>
						<view class="msg">
							<text class="lab">地址：</text>
							<text class="val">{{ item.address }}</text>
						</view>
						<view class="msg">
							<view class="lab">距离：</view>
							<view class="val">
								<text>{{ item.distanceStr }}</text>
								<uv-tags text="选择" size="mini"
									type="success"></uv-tags>
							</view>
						</view>
					</view>
				</view>
				<view class="no-data" v-if="state.page === state.totalPages">没有更多了</view>
			</view>
			<view v-else class="layout-empty-box">
				<coreshop-empty :mode="EmptyEnum.data" text="暂无门店"></coreshop-empty>
			</view>
		</view>
	</coreshop-page>
</template>
<script setup lang="ts">
	import { reactive } from 'vue';
	import { queryStoreList } from '@/core/api';
	import { onLoad, onReachBottom } from '@dcloudio/uni-app';
	import type { Response, StoreListType } from '@/core/models';
	import { handleShowToast } from '@/core/utils';
	import { EmptyEnum } from '@/core/enum';
	import { useSystemInfo } from '@/core/hooks';
	import { userStore } from '@/core/consts';

	/** 获取自定义导航栏高度 */
	const { statusBarHeight } = useSystemInfo();

	const state = reactive<{
		storeList : Array<StoreListType>,
		longitude : number;
		latitude : number;
		page : number,
		limit : number,
		totalPages : number;
		keyWord : string;
	}>({
		storeList: [],
		longitude: 0,
		latitude: 0,
		page: 1,
		limit: 30,
		totalPages: 1,
		keyWord: "",
	});

	onLoad(() => {
		getMyLocation();
	})

	onReachBottom(() => {
		if (state.totalPages > state.page) {
			state.page++;
			getStoreList();
		}
	});

	/** 获取自己的位置信息 */
	const getMyLocation = () => {
		// #ifdef MP-WEIXIN
		wx.getFuzzyLocation({
			type: 'wgs84',
			success(res : any) {
				state.longitude = res.longitude;
				state.latitude = res.latitude;
			},
			fail: function () {
				handleShowToast('获取您的经纬度坐标失败');
			},
			complete: function () {
				if (!state.longitude || !state.latitude) {
					state.longitude = 0;
					state.latitude = 0;
				}
				getStoreList();
			}
		})
		// #endif
		// #ifndef MP-WEIXIN
		uni.getLocation({
			type: 'wgs84',
			success: function (res : any) {
				state.longitude = res.longitude;
				state.latitude = res.latitude;
			},
			fail: function () {
				handleShowToast('获取您的经纬度坐标失败');
			},
			complete: function () {
				if (!state.longitude || !state.latitude) {
					state.longitude = 0;
					state.latitude = 0;
				}
				getStoreList();
			}
		});
		// #endif
	}

	const getStoreList = async () => {
		const storeList : Response<Array<StoreListType>> = await queryStoreList({
			'longitude': state.longitude,
			'latitude': state.latitude,
			'page': state.page,
			'limit': state.limit,
			'key': state.keyWord
		});
		if (storeList.status) {
			state.storeList = state.storeList.concat(storeList.data);
			state.totalPages = storeList.otherData.totalPages;

		} else {
			handleShowToast('门店信息获取失败');
		}
	}

	const handleSearch = () => {
		state.page = 1;
		state.storeList = [];
		getStoreList();
	}

	const handleSelectStore = (item : any) => {
		uni.setStorageSync(userStore, item);
		uni.navigateBack();
	}
</script>
<style lang="scss" scoped>
	@import './storeList.scss';
</style>